<template>
	<view>
		<my-title :bgColor="bgColor" :height="height">
			<template v-slot:left>
				<view class="left-img">
					<image :src="backImg" @click="goBack"></image>
				</view>
			</template>
			<template v-slot:center>
				<view class="center-box">
					<view @click="changeActive(1)" class="box-left-btn" :class="{'active':activeId == 1}">
						<text>找好友</text>
					</view>
					<view @click="changeActive(2)" class="box-right-btn" :class="{'active':activeId == 2}">
						<text>找群组</text>
					</view>
				</view>
			</template>
		</my-title>
	</view>
</template>

<script>
	import myTitle from '@/components/common/my-title/my-title.vue'

	export default {
		components: {
			myTitle
		},
		props: ['activeId'],
		data() {
			return {
				bgColor: 'linear-gradient(to right, #01DAFE 0%, #01A8FF 100%)',
				height: '49',
				backImg: require('@/static/img/common/goBack_fff.svg')
			}
		},
		methods: {
			changeActive(i) {
				//this.activeId = i
				this.$emit('changeActive', i)
			},
			goBack() {
				uni.switchTab({
					url: "/pages/main/message/message"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.active {
		background-color: #FDFDFD;

		text {
			color: #01DAFE;
		}

	}

	.left-img {
		image {
			margin-top: 15px;
			width: 19px;
			height: 19px;
			margin-left: 30rpx;
		}
	}

	.center-box {
		display: flex;

		.box-left-btn {
			margin-left: 10%;
			margin-top: 12px;
			width: 40%;
			height: 25px;
			line-height: 25px;
			// border: 1rpx solid #fff;
			border-bottom: 1rpx solid #fff;
			border-top: 1rpx solid #fff;
			border-left: 1rpx solid #fff;
			border-radius: 30rpx 0 0 30rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
		}

		.box-right-btn {
			width: 40%;
			height: 25px;
			line-height: 25px;
			margin-top: 12px;
			color: #fff;
			font-size: 32rpx;
			border: 1rpx solid #fff;
			border-radius: 0 30rpx 30rpx 0;
			text-align: center;
			font-weight: 500;
		}
	}
</style>
